<!--h函数的使用-->
<template>
    <testDiv></testDiv>
    <br>
    <testDivMore></testDivMore>
    <br>
    <testDiv3></testDiv3>
    <br>
    <testDiv4></testDiv4>
    <br>
    <propsDiv name="我是组件props"></propsDiv>
    <br>
    <emitDiv name="emit测试" @on-click="getEmitVal"></emitDiv>
    <br>
    <slotDiv name="slotDemo">
        <template #default>
            <div>我是slot</div>
        </template>
    </slotDiv>
</template>

<script setup lang='ts'>
import { ref, reactive, h } from 'vue'

const testDiv = () => {
   return h('div','我是简单的div')
}

const testDivMore = () => {
   return h('div',{
    id:'testDiv',
    class:'test-div', // 类名，可以是对象、字符串或数组
    innerHTML: '我是复杂的div', // 内部内容
    style: {color: 'red'}, // 样式，可以是对象或数组
    "^width": '300', // 以"^"开头的，可以用于定义其他属性名
    "^name": 'hahah',
    onclick: () => {console.log('我是点击事件')} // 定义事件开头要是on
   })
}

const testDiv3 = () => {
    return h('div', {id: 'div3'}, '子节点可以是字符串')
}

const testDiv4 = () => {
    return h('div', ['子数组可以为混合的vnode和字符串', h('p', '我是h函数生成的'), '我又是字符串'])
}

type Props = {
    name: string
}

const propsDiv = (props: Props, ctx:any) => {
    return h('div', {
        style: {color: 'blue'}
    }, props.name)
}


const emitDiv = (props: Props, ctx:any) => {
    return h('div', {
        style: {color: 'yellow'},
        onclick: () => {
            ctx.emit('on-click', '我是emit传递的数据')
        }
    },props.name)
}

const getEmitVal = (emitVal:string) => {
    console.log('emitVal', emitVal)
}

const slotDiv = (props:Props, ctx:any) => {
    return h('div', {
        style: {color: 'red'},
    },ctx.slots.default())
}
</script>
<style scoped>
</style>